<template>
	<view>
		
		
		<swiper  class="banner" indicator-color="rgba(255, 255, 255, .3)" indicator-active-color="rgba(217, 233, 194, 1)" autoplay="true">
			<swiper-item v-for="(img, key) in imgUrls" :key="key"><image :src="img" /></swiper-item>
			
		</swiper>
		
		<view class=" topzhishu">
			<view class="ch-wrap">
				<view class="ch-title3 ch-color-bai ch-w-1-1">推荐指数:</view>
				<view class="ch-w-1-1 ch-colo-huang ch-padding-bottom" >
					<text class="eosfont iconshoucang zhishuicon"></text>
					<text class="eosfont iconshoucang zhishuicon"></text>
					<text class="eosfont iconshoucang zhishuicon"></text>
					<text class="eosfont iconshoucang zhishuicon"></text>
					<text class="eosfont iconshoucang zhishuicon"></text>
				</view>
				<view class="eosfont iconguanyuinlikes-xiayibu ch-color-bai  ch-icon-arrow-r ch-paly-x"></view>
			</view>
		</view>
		
		<view class="ch-card-heng jdview ch-radius ch-padding">
			<view class="ch-w-3-2 ch-r-xian">
				<view class="ch-title ch-w-1-1">抱犊寨(石家庄)</view>
				<view class="ch-title3 ch-w-1-1 ch-color-he ">石家庄太行山美景</view>
			</view>
			
			<view class="ch-w-3-1  ch-font-center ">
				<view class=" ch-w-1-1"><text class="ch-title-b ch-bold ch-color-lan">4.5</text><text class="ch-title4 ch-color-hui">/5分</text> </view>
				<view class="ch-title4 ch-w-1-1  ">3198条点评</view>
			</view>
			
			
			<view class=" ch-w-1-1 ch-wode-title  ch-flex-wrap ch-kuai-bj  ch-margin-top ch-padding-shu  ch-radius2 ch-margin-top ch-color-lv ">
				
				<view class="eosfont iconjiangzhang   ch-w-10-1 ch-font-center"></view> 
				<view class="ch-w-10-8">石家庄全家旅游排行榜第18名</view>
				
				<text class="eosfont iconguanyuinlikes-xiayibu ch-icon-arrow-r"></text>
			</view>
			
			
			<view class="ch-w-1-1 ch-flex-wrap ch-margin-top ch-bg ch-radius2" style=" background-image: url(../../../static/weizhi.jpg);" >
				<view class="ch-w-10-1 ch-font-center eosfont iconzuobiao ch-color-hui weizhiicon"></view>
				<view class="ch-w-10-8">
					<view class="ch-wode-title ch-color-hei ch-w-1-1">石家庄市鹿泉区距省会石家庄16公里</view>
					<view class="ch-title3 ch-w-1-1 ">河北省石家庄市鹿泉区抱犊寨河北省石家庄市鹿泉区抱犊寨河北省</view>
				</view>
				<text class="eosfont iconguanyuinlikes-xiayibu ch-icon-arrow-r  ch-font-center ch-color-hui "></text>
			</view>
			
		</view>
		
		<view class="ch-w-1-1 ch-bj-bai  xinxi">
			
			 
				<view class="ch-title2 ch-padding-top ch-color-lv">景点信息</view>
			 
			
	
				<view class=" ch-wrap  ch-margin-top  ch-flex-wrap  ">
					<view class="ch-wode-title ch-w-4-2 ch-font-left">营业时间</view>
					<view class="ch-title3 ch-w-4-2 ch-font-right">上午 9：00 至 下午 5:00</view>
				</view>
				
				<view class=" ch-wrap  ch-margin-top  ch-flex-wrap  ">
					<view class="ch-wode-title ch-w-4-2 ch-font-left">门票</view>
					<view class="ch-title3 ch-w-4-2 ch-font-right">￥35</view>
				</view>
				
				<view class=" ch-wrap  ch-margin-top  ch-flex-wrap  ">
					<view class="ch-wode-title ch-w-4-2 ch-font-left">服务</view>
					<view class="ch-title3 ch-w-4-2 ch-font-right"> </view>
				</view>
		
			
			
			
		</view>
		
		
		
		 
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				indicatorcolor: "rgba(255, 255, 255, .3)",
				showSwiper: false,
				imgUrls: [
					'../../../static/shuijiao3.jpg',
					'../../../static/shuijiao2.jpg'
				],
	
			};
		},
		methods: {
			 navigateTo() {
			 	uni.navigateTo({
			 		url: '../../component/langji_view/langji_view'
			 	})
			 }
		}
		 
		
	
	};
	
</script>

<style>
	
	body{ background: #eee;}
	
	image,
	swiper,
	.img-view {
		width: 750upx;
		height: 500upx;
	}
	/* 首页广告图 */
	.banner{   overflow: hidden;  }
	 
	
	.jdview{ background: #fff; position: relative; top: -20upx; margin-top: 0; overflow: hidden; }
	
	.ch-kuai-bj{ background:rgba(184,218,132,0.2);}
	
	.ch-wode-title{ font-size: 32upx;  }
	
	.ch-icon-arrow-r{ top: 30%;}
	
	.weizhiicon{ line-height: 50upx;}
	
	.ch-padding-shu{ padding: 20upx 0; }
	
	.xinxi{ padding-bottom: 20upx; position: relative; top: -40upx;}
	
	.ch-title2-bom-xian{}
	
	.topzhishu{ position: absolute; top:350upx; width:100% ; padding-bottom:20upx ; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.0) 0%,rgba(0, 0, 0, 0.3) 40%,rgba(0, 0, 0, 0.5) 98%,#FFFFFF 100%); }
	
	.zhishuicon{ font-size: 48upx; margin-right: 10upx; position: relative; top: 10upx;}
	
</style>
